<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="sproutcore.css" type="text/css" />
<link rel="stylesheet" href="bespin.css" type="text/css" />

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
  require.preload(["ref-send", "sandbox", "narwhal/client", "array", "object", "string", "function", "regexp", "reactor", "date", "global", "system", "binary"]);
  require.async("bespin/boot");
</script>

<script type="text/javascript" src="dojo/dojo.js.uncompressed.js"></script>
<script type='text/javascript' src='dojo/regexp.js'></script>
<script type='text/javascript' src='dojo/cookie.js'></script>
<script type='text/javascript' src='dojo/AdapterRegistry.js'></script>
<script type='text/javascript' src='dojo/fx/easing.js'></script>
<script type='text/javascript' src='dijit/_base/place.js'></script>
<!--
<script type='text/javascript' src='th.compressed.js'></script>
-->

<style>
  body { padding: 20px; font-family: Calibri, Helvetica, Arial; }
  h1 { border-bottom: 1px solid #ddd; font-size:120%; }
  .bespin { margin: 0; padding: 0; border: 0; height: 300px; border: 10px solid #ddd; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
</style>
</head>
<body>

<h1>Sample Editor as a Component</h1>
<div id="editor" class="bespin" data-bespinoptions='{ "stealFocus": true }'>var foo = "whee";

function flubber() {
    return "tweeble";
}</div>

<script>
window.onBespinLoad = function() {
    console.log("window.onBespinLoad called");
    bespin = document.getElementById("editor").bespin;
};
</script>

<h1>Play with the editor</h1>

<!--
<div>
  <script>
    function setSyntax(value) {
        bespin.set("language", { language: value });
    }
  </script>
  Enter language and blur out: <input type="text" id="syntax" value="" onblur="setSyntax(this.value)">
</div>
-->

<div>
  <script>
    function setSetting() {
        var key = dojo.byId('key').value;
        var value = dojo.byId('value').value;
        console.debug(bespin);
        bespin.set(key, value);
    }
  </script>
  Push a new setting: <input type="text" id="key" value="strictlines">
  <input type="text" id="value" value="on">
  <input type="button" value="set" onclick="setSetting();">
</div>

<div>
  <script>
    function copyToTextarea() {
        dojo.byId('inandout').value = bespin.getContent();
    }
    function copyToEditor() {
        bespin.setContent(dojo.byId('inandout').value);
    }
  </script>
  <textarea id="inandout" cols="100" rows="10"></textarea><br>
  <input type="button" value="Copy to Textarea" onclick="copyToTextarea()">
  <input type="button" value="Copy to Editor" onclick="copyToEditor()">
</div>

</body>
</html>
